<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <div class="info">
            <div class="info-title">标题</div>
            <div class="info-num">数量</div>
          </div>
        </a-col>
        <a-col :sm="8" :xs="24">
          <div class="info">
            <div class="info-title">标题</div>
            <div class="info-num">数量</div>
          </div>
        </a-col>
        <a-col :sm="8" :xs="24">
          <div class="info">
            <div class="info-title">标题</div>
            <div class="info-num">数量</div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top:24px" :bordered="false" title="标准列表">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="processing">进行中</a-radio-button>
          <a-radio-button value="waiting">等待中</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left:16px;width:227px;"></a-input-search>
      </div>
      <div class="operate">
        <a-button type="dashed" style="width:100%" icon="plus" @click="add">添加</a-button>
      </div>
      <a-list size="large" :pagination="pagination">
        <a-list-item v-for="(item, index) in data" :key="index" :actions="actions">
          <a-list-item-meta :description="item.description">
            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"></a-avatar>
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>
          <div class="list-content">
            <div class="list-content-item">
              <span>Owner</span>
              <p>{{ item.owner }}</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>{{ item.startAt }}</p>
            </div>
            <div class="list-content-item">
              <a-progress
                :percent="item.progress.value"
                :status="!item.progress.status ? null : item.progress.status"
                style="width: 180px"
              />
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </page-header-wrapper>
</template>
<script lang="jsx">
const data = []
data.push({
  title: 'Alipay',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  description: '那是一种内在的东西， 他们到达不了，也无法触及的',
  owner: '付晓晓',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 90
  }
})
data.push({
  title: 'Angular',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
  owner: '曲丽丽',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 54
  }
})
data.push({
  title: 'Ant Design',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  description: '生命就像一盒巧克力，结果往往出人意料',
  owner: '林东东',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 66
  }
})
data.push({
  title: 'Ant Design Pro',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
  owner: '周星星',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 30
  }
})
data.push({
  title: 'Bootstrap',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '那时候我只会想自己想要什么，从不想自己拥有什么',
  owner: '吴加好',
  startAt: '2018-07-26 22:44',
  progress: {
    status: 'exception',
    value: 100
  }
})
export default {
  data() {
    return {
      a: 1,
      b: 2,
      status: 'all',
      data,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: 5,
        total: 50
      },
      actions: []
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
    }
  },
  mounted() {
    console.log(this.actions)
    this.actions = [
      <a>编辑</a>,
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item><a>编辑</a></a-menu-item>
          <a-menu-item><a>删除</a></a-menu-item>
        </a-menu>
        <a>更多<a-icon type="down"/></a>
      </a-dropdown>
    ]
    console.log(this.actions)
  }
}
</script>
<style type="text/css" scoped>
.info {
  text-align: center;
}
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
</style>
